<template>
  <div class="newdiscLayout">
    <div class="title">
      <span class="titleTxt">全部新碟</span>
      <div class="tab">
        <router-link
          tag="span"
          :to="{ name: 'newdisc', query: { area: item.key } }"
          v-for="item in areaArr"
          :key="item.key"
          >{{ item.name }}</router-link
        >
      </div>
    </div>
    <ul class="itemBox">
      <router-link
        tag="li"
        :to="{ name: 'album', query: { id: item.id, uid: item.artist.id } }"
        class="albumItem"
        v-for="item in albumArr"
        :key="item.id"
      >
        <div class="imgBox">
          <img :src="item.picUrl" alt="" />
          <div class="picBG"></div>
        </div>
        <p class="itemName txtHide">{{ item.name }}</p>
        <p class="artists txtHide">
          <span v-for="itemTwo in item.artists" :key="itemTwo.id"
            >{{ itemTwo.name }} /</span
          >
        </p>
      </router-link>
    </ul>
    <div class="pageBox">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="limit"
        :current-page="$route.query.page"
        :hide-on-single-page="true"
        @current-change="pageNumChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { albumnew } from "@/api";
export default {
  data() {
    return {
      limit: 30,
      areaArr: [
        { key: "ALL", name: "全部" },
        { key: "ZH", name: "华语" },
        { key: "EA", name: "欧美" },
        { key: "KR", name: "韩国" },
        { key: "JP", name: "日本" },
      ],
      albumArr: [],
      total: 0,
    };
  },
  created() {
    this.getDate();
  },
  methods: {
    getDate() {
      albumnew({
        limit: this.limit,
        area: this.$route.query.area,
        offset: (this.$route.query.page - 1) * 30 || null,
      }).then((res) => {
        this.albumArr = res.albums;
        this.total = res.total;
      });
    },
    pageNumChange(num) {
      this.$router.push({
        name: "newdisc",
        query: { area: this.$route.query.area, page: num },
      });
    },
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.getDate();
  },
};
</script>

<style lang="scss" scoped>
.newdiscLayout {
  width: 980px;
  min-height: 700px;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  margin: auto;
  padding: 40px;
  box-sizing: border-box;
  .title {
    display: flex;
    height: 40px;
    border-bottom: 2px solid #c20c0c;
    .titleTxt {
      font-size: 24px;
      font-weight: normal;
    }
    .tab {
      margin: 12px 0 0 20px;
      span {
        color: #666;
        cursor: pointer;
        margin: 0 10px;
        &:hover {
          text-decoration: underline;
          color: #333;
        }
      }
    }
  }
  .itemBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .albumItem {
      width: 153px;
      height: 178px;
      margin-top: 20px;
      .imgBox {
        width: 130px;
        height: 130px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .picBG {
          position: absolute;
          top: 0;
          left: 0;
          width: 153px;
          height: 130px;
          background: url("./../../assets/imges/background.png") no-repeat 0 -845px;
        }
      }
      .itemName {
        margin: 8px 0 3px;
        font-size: 14px;
      }
      .artists {
        color: #666;
      }
    }
  }
  .pageBox {
    text-align: center;
    margin-top: 20px;
  }
}
</style>